<template>
    <div class="analysis-wrapper main">
        <nav-bar>
            <template v-slot:back>
                <back-button/>
            </template>
            <template v-slot:title>
                <h1 class="base-font-color">图表分析</h1>
            </template>
        </nav-bar>
        <div class="base-content">
            <p class="analysis-info">
                当前干部信息库采集了<span>{{info.count}}</span>人干部信息，男性干部<span>{{info.male}}</span>名，女性干部<span>{{info.female}}</span>名。中共党员<span>{{info.partyer}}</span>名，非中共党员<span>{{info.unpartyer}}</span>名，少数民族干部<span>{{info.minority}}</span>名，博士学位干部<span>{{info.doctor}}</span>名，研究生学历干部<span>{{info.graduate}}</span>名。
            </p>
            <ul class="clearfix analysis-items">
                <analysis-item label="性别" icon="user" :btns="['男', '女']" :data="cards.sex"/>
                <analysis-item label="民族" icon="buiding" :btns="['汉族', '少数民族']" :data="cards.nation"/>
                <analysis-item label="党派" icon="settings" :btns="['中共', '非中共']" :data="cards.party"/>
                <!--                <analysis-item label="领导" icon="book" :btns="['领导', '非领导']" :data="cards.leader"/>-->
            </ul>
            <div class="analysis-row">
                <div class="clearfix">
                    <div class="analysis-chart1">
                        <work-chart ref="workchart" :chartData="WorkChart"/>
                    </div>
                    <div class="analysis-chart1">
                        <education-chart ref="educationchart" :chartData="EducationChart"/>
                    </div>
                </div>
            </div>
            <div class="analysis-chart2">
                <age-chart ref="agechart" :chartData="AgeChart"/>
            </div>
        </div>
    </div>
</template>

<script>
    import {navbarMixin} from "../../mixins";
    import AnalysisItem from "./child-comp/AnalysisItem";
    import WorkChart from "./child-comp/WorkChart";
    import EducationChart from "./child-comp/EducationChart";
    import AgeChart from "./child-comp/AgeChart";
    import {IO} from '../../common/plus/io'
    import {makeAnalysisData} from "../../common/data-base/DataInterface";
    import {analysis} from "../../api/analysis";

    export default {
        name: "Analysis",
        mixins: [navbarMixin],
        components: {
            AgeChart,
            AnalysisItem,
            WorkChart,
            EducationChart
        },
        data() {
            return {
                "info": {
                    "count": 0,
                    "male": 0,
                    "female": 0,
                    "partyer": 0,
                    "unpartyer": 0,
                    "minority": 0,
                    "doctor": 0,
                    "graduate": 0
                },
                "cards": {
                    "sex": [{"count": 0, "rate": "0%"}, {"count": 0, "rate": "0%"}],
                    "nation": [{"count": 0, "rate": "0%"}, {"count": 0, "rate": "0%"}],
                    "party": [{"count": 0, "rate": "0%"}, {"count": 0, "rate": "0%"}]
                },
                "WorkChart": [{"label": "30年以上", "value": 0}, {"label": "25年-30年", "value": 0}, {
                    "label": "20年-25年",
                    "value": 0
                }, {"label": "10年-20年", "value": 0}, {"label": "5年-10年", "value": 0}, {"label": "5年以内", "value": 0}],
                "EducationChart": [{
                    "type": "在职学历",
                    "data": [{"label": "研究生", "value": 0}, {"label": "本科", "value": 0}, {
                        "label": "专科",
                        "value": 0
                    }, {"label": "高中及以下", "value": 0}]
                }, {
                    "type": "全日制学历",
                    "data": [{"label": "研究生", "value": 0}, {"label": "本科", "value": 0}, {
                        "label": "专科",
                        "value": 0
                    }, {"label": "高中及以下", "value": 0}]
                }],
                "AgeChart": [{"label": "", "value": null}, {"label": "小于30岁", "value": 0}, {
                    "label": "30岁-35岁",
                    "value": 0
                }, {"label": "35岁-45岁", "value": 0}, {"label": "45岁-55岁", "value": 0}, {"label": "55岁以上", "value": 0}]
            }
        },
        created() {
            if (this.$store.state.plusAlready) {
                this.init();
            } else {
                analysis.then(res => {
                    this.$nextTick(() => {
                        this.initData(res);
                    });
                });
            }
        },
        methods: {
            async init() {
                const filename = 'analysis.json';
                const exist = await IO.fileExist(filename);
                if (exist) {
                    IO.readFile(filename, ({data}) => {
                        console.log(`${filename}  读取成功`);
                        console.log(JSON.stringify(data));
                        this.$nextTick(() => {
                            this.initData(data);
                        });

                    })
                } else {
                    const data = await makeAnalysisData();
                    this.$nextTick(() => {
                        this.initData(data);
                    });
                    IO.writeFile(filename, ({writer, error, mes}) => {
                        if (!error) {
                            writer.onwrite = function () {
                                console.log(`${filename}  创建成功`);
                            };
                            let str = JSON.stringify(data);
                            writer.seek(0);
                            writer.write(str);
                        } else {
                            alert(mes);
                        }
                    });
                }
            },
            initData(param) {

                for(let key in param.info) {
                    this.$set(this.info, key, param.info[key]);
                }
                for(let key in param.cards) {
                    this.$set(this.cards, key, param.cards[key]);
                }
                for(let key in param.WorkChart) {
                    this.$set(this.WorkChart, key, param.WorkChart[key]);
                }
                this.$refs.workchart.updateChart(param.WorkChart);

                for(let key in param.EducationChart) {
                    this.$set(this.EducationChart, key, param.EducationChart[key]);
                }
                this.$refs.educationchart.updateChart(param.EducationChart);
                for(let key in param.AgeChart) {
                    this.$set(this.AgeChart, key, param.AgeChart[key]);
                }
                this.$refs.agechart.updateChart(param.AgeChart);
            }
        }
    };
</script>

<style scoped lang="scss">
    @import "../../assets/scss/define";

    $m: 5px;
    .analysis-wrapper {
        background-color: $border-color;

        .base-content {
            display: flex;
            flex-direction: column;
            overflow-x: hidden;

            .analysis-info {
                background-color: #ffffff;
                text-align: left;
                padding: 10px 10px;

                > span {
                    color: $base-color;
                    font-weight: bold;
                }
            }

            .analysis-items {
                margin-top: $m;

                li:not(:first-child) {
                    margin-left: $m;
                }
            }

            .analysis-row {
                margin-top: $m;

                .analysis-chart1 {
                    float: left;
                    width: calc((100% - #{$m}) / 2);
                    height: 200px;
                    background-color: #fff;

                    &:not(:first-child) {
                        margin-left: $m;
                    }
                }
            }

            .analysis-chart2 {
                flex: 1;
                margin-top: $m;
                width: 100%;
                height: max-content;
                background-color: #fff;
            }
        }
    }
</style>
